
<template>
  <div class="taskModel">
    <el-dialog
      title="任务"
      :visible.sync="visible"
      custom-class="taskModelCustomClass"
      width="45%"
      :before-close="close"
    >
      <div slot="title" class="taskModelTitle">
        <span style="margin-right: 30px"
          ><attributeCom :handleAttribute="handleAttribute"
        /></span>
      </div>
      <div>
        <div class="taskModelMain">
          <div class="project">
            <span
              ><belongingProject
                ref="belongingProjectRef"
                :getProTaskList="getProTaskList"
            /></span>
          </div>
          <div class="form">
            <div class="titleRow">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入任务标题（必填）"
                v-model="form.title"
                class="taskTitle"
              >
              </el-input>
              <span>{{
                propsObj.type === "schedule"
                  ? "日程"
                  : propsObj.type === "flow"
                  ? "流程任务"
                  : "标准任务"
              }}</span>
            </div>
            <div class="taskHead iconMainFlex">
              <el-tooltip
                class="item"
                effect="dark"
                content="负责人"
                placement="top"
              >
                <i
                  class="el-icon-user"
                  style="margin-right: 10px; font-size: 20px"
                ></i>
              </el-tooltip>
              <i
                v-if="!form.taskHead.length"
                class="el-icon-circle-plus-outline"
                style="font-size: 20px; cursor: pointer"
                @click="handleChooseUser('taskHead')"
              ></i>
              <span
                v-else
                class="hasTaskHead"
                @click="handleChooseUser('taskHead')"
              >
                <img
                  :src="form.taskHead[0].avatar"
                  alt=""
                  v-if="form.taskHead[0].avatar"
                />
                <span v-else class="avatar">{{
                  form.taskHead[0].nickName[0]
                }}</span>
                <span style="margin-left: 5px">{{
                  `${form.taskHead[0].nickName}(${form.taskHead[0].dept.deptName})`
                }}</span>
                <i
                  :class="['el-icon-error', 'iconView']"
                  @click.stop="form.taskHead = []"
                ></i>
              </span>
            </div>
            <div class="time iconMainFlex">
              <div style="display: flex; align-items: center">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="时间"
                  placement="top"
                >
                  <i
                    class="el-icon-date"
                    style="margin-right: 10px; font-size: 20px"
                  ></i>
                </el-tooltip>
                <span
                  class="noTime"
                  v-if="!form.time[0]"
                  @click="handleChooseTime"
                  >时间待定</span
                >
                <span class="chooseTime" v-else>
                  <el-date-picker
                    v-model="form.time[0]"
                    type="datetime"
                    placeholder="设置开始时间"
                    :clearable="false"
                    @change="handleEndTimeChange"
                  >
                  </el-date-picker
                  ><span> - </span>
                  <el-date-picker
                    v-model="form.time[1]"
                    type="datetime"
                    placeholder="设置结束时间"
                    :clearable="false"
                    class="endTime"
                    @change="handleEndTimeChange"
                  >
                  </el-date-picker>
                  <i
                    :class="['el-icon-error', 'iconView']"
                    @click.stop="form.time = []"
                  ></i
                ></span>
              </div>
              <div v-if="form.time[1] && form.time[0]">
                <i
                  class="el-icon-alarm-clock"
                  @click="handleRemind"
                  style="
                    font-size: 20px;
                    color: #1890ff;
                    margin-right: 8px;
                    cursor: pointer;
                  "
                ></i>
                <el-dropdown trigger="click" @command="handleCirculate">
                  <i
                    class="el-icon-circle-check"
                    :style="{
                      fontSize: '20px',
                      color: !form.circulateType ? '#606266' : '#1890ff',
                      marginRight: '8px',
                      cursor: 'pointer',
                    }"
                  ></i>
                  <el-dropdown-menu slot="dropdown" style="width: 200px">
                    <el-dropdown-item command="1"
                      ><div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                      >
                        <span>每天循环</span
                        ><i
                          class="el-icon-check"
                          v-show="form.circulateType === '1'"
                        ></i></div
                    ></el-dropdown-item>
                    <el-dropdown-item command="2"
                      ><div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                      >
                        <span>每周循环</span
                        ><i
                          class="el-icon-check"
                          v-show="form.circulateType === '2'"
                        >
                        </i></div
                    ></el-dropdown-item>
                    <el-dropdown-item command="3"
                      ><div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                      >
                        <span>每月循环</span
                        ><i
                          class="el-icon-check"
                          v-show="form.circulateType === '3'"
                        ></i></div
                    ></el-dropdown-item>
                    <el-dropdown-item command="4"
                      ><div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                      >
                        <span>每年循环</span
                        ><i
                          class="el-icon-check"
                          v-show="form.circulateType === '4'"
                        ></i></div
                    ></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="taskList iconMainFlex" v-if="attribute.taskList">
              <i
                class="el-icon-s-order"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>项目清单</span>
              <el-select
                v-model="form.projectListId"
                size="mini"
                placeholder="请选择"
                style="margin-left: 12px"
              >
                <el-option
                  v-for="item in tasklistOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div
              class="taskDesc iconMainFlex"
              style="align-items: flex-start"
              v-if="attribute.taskDescription"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="任务描述"
                placement="top"
              >
                <i
                  class="el-icon-tickets"
                  style="margin-right: 10px; font-size: 20px"
                ></i>
              </el-tooltip>
              <Editor v-model="form.taskDescribe" :min-height="192" />
            </div>
            <div
              class="participants iconMainFlex"
              v-if="attribute.participants"
            >
              <i
                class="el-icon-s-custom"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>参与人</span>
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  closable
                  type="info"
                  v-for="item in form.participants"
                  :key="item.userId"
                  @close="handleCloseParticipants(item)"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.nickName }}
                </el-tag>
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 20px; cursor: pointer; margin-top: 4px"
                  @click="handleChooseUser('participants')"
                ></i>
              </div>
            </div>
            <div class="label iconMainFlex" v-if="attribute.label">
              <i
                class="el-icon-price-tag"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>标签</span>
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  closable
                  type="info"
                  v-for="item in form.label"
                  :key="item.id"
                  @close="handleCloseTags(item)"
                  :style="{
                    marginLeft: '10px',
                    marginBottom: '8px',
                    color: '#fff',
                    background: item.color,
                  }"
                >
                  {{ item.tag }}
                </el-tag>
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 20px; cursor: pointer; margin-top: 4px"
                  @click="handleLabelOpen"
                ></i>
              </div>
            </div>
            <div class="priority iconMainFlex" v-if="attribute.priority">
              <i
                class="el-icon-place"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>优先级</span>
              <div>
                <el-dropdown @command="handlePriority" trigger="click">
                  <el-button
                    :type="currentPriority"
                    plain
                    size="small"
                    style="margin-left: 12px; width: 90px"
                  >
                    {{
                      form.priority
                        ? form.priority === "1"
                          ? "普通"
                          : form.priority === "2"
                          ? "紧急"
                          : "非常紧急"
                        : "请选择"
                    }}
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">普通</el-dropdown-item>
                    <el-dropdown-item command="2">紧急</el-dropdown-item>
                    <el-dropdown-item command="3">非常紧急</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="planWorking iconMainFlex" v-if="attribute.workingHours">
              <i
                class="el-icon-date"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>计划工时</span>
              <div style="margin-left: 12px">
                <el-input-number
                  v-model="form.planWorking"
                  size="mini"
                  controls-position="right"
                  :min="0"
                  :precision="1"
                ></el-input-number
                >&nbsp;天
              </div>
            </div>
            <div
              class="finishReview iconMainFlex"
              v-if="attribute.finishReview"
            >
              <i
                class="el-icon-user"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>完成审批</span>
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  closable
                  type="info"
                  v-for="item in form.finishReview"
                  :key="item.userId"
                  @close="handleCloseFinishReview(item)"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.nickName }}
                </el-tag>
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 20px; cursor: pointer; margin-top: 4px"
                  @click="handleChooseUser('finishReview')"
                ></i>
                <span v-if="form.finishReview.length > 1">
                  <el-dropdown @command="handleReviewType" trigger="click">
                    <el-button
                      plain
                      size="small"
                      style="margin-left: 12px; width: 90px"
                    >
                      {{
                        form.reviewType
                          ? form.reviewType === "1"
                            ? "依次审批"
                            : form.reviewType === "2"
                            ? "或签"
                            : "会签"
                          : "请选择"
                      }}
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="1">依次审批</el-dropdown-item>
                      <el-dropdown-item command="2">或签</el-dropdown-item>
                      <el-dropdown-item command="3">会签</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </div>
            </div>
            <div class="ccTo iconMainFlex" v-if="attribute.ccTo">
              <i
                class="el-icon-user-solid"
                style="margin-right: 10px; font-size: 20px; color: #606266"
              ></i>
              <span>抄送人</span>
              <div style="display: flex; flex-wrap: wrap; max-width: 85%">
                <el-tag
                  closable
                  type="info"
                  v-for="item in form.ccTo"
                  :key="item.userId"
                  @close="handleCloseCcTo(item)"
                  style="margin-left: 10px; margin-bottom: 8px"
                >
                  {{ item.nickName }}
                </el-tag>
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 20px; cursor: pointer; margin-top: 4px"
                  @click="handleChooseUser('ccTo')"
                ></i>
              </div>
            </div>
            <div class="checkList" v-if="attribute.checkList">
              <div class="iconMainFlex">
                <i
                  class="el-icon-finished"
                  style="margin-right: 10px; font-size: 20px; color: #606266"
                ></i>
                <span>检查项</span>
              </div>
              <draggable
                v-model="form.checkList"
                dragClass="dragClass"
                ghostClass="ghostClass"
                chosenClass="chosenClass"
                handle=".el-icon-s-operation"
                animation="300"
              >
                <transition-group>
                  <div
                    class="checkListItem"
                    v-for="item in form.checkList"
                    :key="item.h5Uid"
                    style="margin-bottom: 12px"
                  >
                    <el-input
                      v-model="item.content"
                      placeholder="请填写检查项内容(必填)"
                    ></el-input>
                    <i
                      class="el-icon-delete"
                      @click="handleDeleteCheckList(item)"
                    ></i>
                    <i class="el-icon-s-operation"></i>
                  </div>
                </transition-group>
              </draggable>

              <div style="padding: 0 20px 12px 20px">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="handleAddCheckList"
                  >添加检查项</el-button
                >
              </div>
            </div>
            <div class="children" v-if="attribute.childTask">
              <div class="iconMainFlex">
                <i
                  class="el-icon-guide"
                  style="margin-right: 10px; font-size: 20px; color: #606266"
                ></i>
                <span>子任务</span>
              </div>
              <div
                class="childrenItem"
                v-for="(item, index) in form.children"
                :key="item.h5Uid"
                style="margin-bottom: 12px"
              >
                <el-input
                  v-model="item.title"
                  placeholder="请填写子任务标题(必填)"
                  style="width: 60%"
                ></el-input>
                <el-date-picker
                  v-model="item.time[1]"
                  type="datetime"
                  placeholder="结束时间"
                  style="margin-left: 12px"
                >
                </el-date-picker>
                <span
                  class="hasTaskHead"
                  @click="handleChooseUser('children', index)"
                >
                  <img
                    :src="item.taskHead[0].avatar"
                    alt=""
                    v-if="item.taskHead[0].avatar"
                  />
                  <span v-else class="avatar">{{
                    item.taskHead[0].nickName[0]
                  }}</span>
                </span>
                <i
                  class="el-icon-delete"
                  @click="handleDeleteChildrenTask(item)"
                ></i>
              </div>

              <div style="padding: 0 20px 12px 20px">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="handleAddChildrenTask"
                  >添加子任务</el-button
                >
              </div>
            </div>
            <div class="file" v-if="attribute.file">
              <div class="iconMainFlex">
                <i
                  class="el-icon-folder-opened"
                  style="margin-right: 10px; font-size: 20px; color: #606266"
                ></i>
                <span>附件</span>
              </div>
              <el-upload
                class="upload-demo"
                style="margin-left: 20px"
                :action="uploadImgUrl"
                :headers="headers"
                :file-list="form.fileList"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess"
                :on-remove="uploadRemove"
              >
                <el-button type="text" icon="el-icon-plus">添加附件</el-button>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          style="margin-left: 100px"
          type="primary"
          @click="handleTaskSubmit"
          :loading="submitLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <userModal
      ref="userModal"
      v-if="userModalOpen"
      :multiple="userMultiple"
      :handleUserSubmit="handleUserSubmit"
      :close="closeUserModal"
      :open="userModalOpen"
      :typeKey="userModalTypeKey"
    />
    <Label
      :open="labelOpen"
      v-if="labelOpen"
      :viewTagList="form.label"
      :close="() => (labelOpen = false)"
      :handleTagSubmit="handleTagSubmit"
    />
  </div>
</template>

<script >
import attributeCom from "@/views/taskMassage/components/task/components/attribute.vue";
import belongingProject from "@/views/taskMassage/components/task/components/belongingProject.vue";
import userModal from "@/views/taskMassage/components/task/components/userModal.vue";
import Label from "@/views/taskMassage/components/task/components/label.vue";
import moment from "moment";
import Editor from "@/components/Editor";
import draggable from "vuedraggable";
import { uuid } from "vue-uuid";
import { getToken } from "@/utils/auth";
import { addOrUpdateTask } from "@/api/task/task.js";
import { projectList } from "@/api/task/project.js";
const initAttribute = {
  // 参与人
  participants: false,
  // 抄送人
  ccTo: false,
  // 完成审批
  finishReview: false,
  // 任务描述F$
  taskDescription: false,
  // 优先级
  priority: false,
  // 计划工时
  workingHours: false,
  // 标签
  label: false,
  // 子任务
  childTask: false,
  // 附件
  file: false,
  // 检查项
  checkList: false,
};
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    propsObj: {
      type: Object,
      default: () => {},
    },
    projectRow: {
      type: Object,
      default: () => {},
    },
    proList: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    attributeCom,
    belongingProject,
    userModal,
    Editor,
    Label,
    draggable,
  },
  data() {
    return {
      submitLoading: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      userModalOpen: false,
      userMultiple: false,
      userModalTypeKey: undefined,
      labelOpen: false,
      currentPriority: undefined,
      childTaskIndex: undefined,
      attribute: {},
      form: {
        title: undefined,
        taskHead: [],
        time: [],
        taskList: "1",
        circulateType: "",
        taskDescribe: undefined,
        participants: [],
        label: [],
        priority: undefined,
        planWorking: 0.0,
        finishReview: [],
        reviewType: "2",
        ccTo: [],
        checkList: [],
        children: [],
        fileList: [],
      },
      tasklistOption: [],
    };
  },
  methods: {
    async getProTaskList(id, isClear) {
      const res = await projectList(id);
      this.tasklistOption = res.data;
      if (!isClear) {
        this.form = { ...this.form, projectListId: undefined };
      }
    },
    // 任务提交
    async handleTaskSubmit() {
      const params = {
        id: this.form.id,
        type: ["schedule", "standard"].includes(this.propsObj.type) ? "1" : "2",
        taskType: this.propsObj.type === "schedule" ? "2" : "1",
        title: this.form.title ? this.form.title : undefined,
        startTime: this.form.time?.[0]
          ? moment(this.form.time?.[0]).format("YYYY-MM-DD HH:mm:ss")
          : undefined,
        endTime: this.form.time?.[1]
          ? moment(this.form.time?.[1]).format("YYYY-MM-DD HH:mm:ss")
          : undefined,
        loopType: this.form.circulateType,
        priority: this.form.priority ? this.form.priority : undefined,
        description: this.form.taskDescribe,
        projectId: this.$refs.belongingProjectRef?.value?.id,
        files: this.form.fileList,
        headUserId: this.form.taskHead?.[0]?.userId,
        projectListId: this.form.projectListId,
      };
      if (!this.form.title) {
        this.$message.error("任务标题不能为空！");
        return undefined;
      }
      if (!this.form.time?.[0]) {
        this.$message.error("任务开始时间不能为空！");
        return undefined;
      }
      if (!this.form.time?.[1]) {
        this.$message.error("任务结束时间不能为空！");
        return undefined;
      }
      if (!this.form.priority) {
        this.$message.error("优先级不能为空！");
        return undefined;
      }
      if (this.form.participants?.length) {
        const participateInUserIds = [];
        this.form.participants.forEach((item) =>
          participateInUserIds.push(item.userId)
        );
        params.participateInUserIds = participateInUserIds.toString();
      }
      if (this.form.label?.length) {
        const tagIds = [];
        this.form.label.forEach((item) => tagIds.push(item.id));
        params.tagIds = tagIds.toString();
      }
      if (this.form.finishReview?.length) {
        const auditUserIds = [];
        this.form.finishReview.forEach((item) =>
          auditUserIds.push(item.userId)
        );
        params.auditUserIds = auditUserIds.toString();
      }
      if (this.form.finishReview?.length > 1) {
        params.auditUserType = this.form.reviewType;
      }
      if (this.form.ccTo?.length) {
        const copyOfUserIds = [];
        this.form.ccTo.forEach((item) => copyOfUserIds.push(item.userId));
        params.copyOfUserIds = copyOfUserIds.toString();
      }
      if (this.form.checkList?.length) {
        const checkOptions = [];
        this.form.checkList.forEach((item) => {
          if (item.content) {
            checkOptions.push(item.content);
          }
        });
        if (checkOptions.length) {
          params.checkOptions = checkOptions.toString();
        }
      }
      if (this.form.children.length) {
        const childTasks = [];
        this.form.children.forEach((item) => {
          if (item.title) {
            childTasks.push({
              id: item?.id,
              title: item.title,
              endTime: item.time?.[1]
                ? moment(item.time?.[1]).format("YYYY-MM-DD HH:mm:ss")
                : undefined,
              headUserId: item.taskHead?.[0]?.userId,
            });
          }
        });
        params.childTasks = childTasks;
      }
      this.submitLoading = true;
      const res = await addOrUpdateTask(params);
      this.submitLoading = false;
      if (res.code === 200) {
        this.$message.success(this.form.id ? "修改成功" : "新增成功");
        this.close();
        this.propsObj.getList(res.data, this.form.id);
      }
    },
    // 删除文件
    uploadRemove(file, fileList) {
      this.form.fileList = fileList;
    },
    // 文件上传成功
    uploadSuccess(response, file, fileList) {
      this.$modal.closeLoading();
      console.log(this.form.fileList, fileList);
      if (response.code === 200) {
        fileList.forEach((item, index) => {
          if (item.uid === file.uid) {
            const fileRes = {
              name: response.data.fileName,
              url: response.data.url,
              format: file.raw?.type,
              size: file.size,
            };
            this.$set(this.form.fileList, index, fileRes);
          }
        });
      } else {
        this.$$message.error(res.msg);
      }
    },
    // 文件上传前置
    beforeUpload(file) {
      const isLt = file.size / 1024 / 1024 < 5;
      if (!isLt) {
        this.$modal.msgError(`上传文件大小不能超过 ${"5"} MB!`);
        return false;
      }
      this.$modal.loading("正在上传，请稍候...");
    },
    // 监听属性变化
    handleAttribute(attribute) {
      localStorage.setItem("attribute", JSON.stringify(attribute));
      this.attribute = localStorage.getItem("attribute")
        ? JSON.parse(localStorage.getItem("attribute"))
        : initAttribute;
    },
    // 删除子任务
    handleDeleteChildrenTask({ h5Uid }) {
      this.form.children = this.form.children.filter(
        (item) => item.h5Uid !== h5Uid
      );
    },
    // 添加子任务
    async handleAddChildrenTask() {
      const params = {
        h5Uid: uuid.v1(),
        taskHead: [this.$store.state.user.loginInfo],
        time: [moment(), undefined],
      };
      this.form.children.push(params);
    },
    // 删除检查项
    handleDeleteCheckList({ h5Uid }) {
      this.form.checkList = this.form.checkList.filter(
        (item) => item.h5Uid !== h5Uid
      );
    },
    // 添加检查项
    handleAddCheckList() {
      let ispass = true;
      if (this.form.checkList.length) {
        this.form.checkList.forEach(({ content }, index) => {
          if (!content) {
            ispass = false;
            this.$message.error(`请先填写第${index + 1}行的检查内容`);
          }
        });
      }

      ispass && this.form.checkList.push({ h5Uid: uuid.v1() });
    },
    // 删除抄送人
    handleCloseCcTo(row) {
      this.form.ccTo = this.form.ccTo.filter(
        (item) => item.userId !== row.userId
      );
    },
    // 选择审批方式
    handleReviewType(val) {
      this.form.reviewType = val;
    },
    // 删除完成审批人
    handleCloseFinishReview(row) {
      this.form.finishReview = this.form.finishReview.filter(
        (item) => item.userId !== row.userId
      );
    },
    //  动态计算计划工时
    handleEndTimeChange() {
      if (this.form.time?.[0] && this.form.time?.[1]) {
        let startTime = moment(this.form.time[0]);
        let endTime = moment(this.form.time[1]);
        let diff = endTime.diff(startTime, "milliseconds");
        let days = diff / (1000 * 60 * 60 * 24);
        this.form.planWorking = Math.round(days * 10) / 10;
      }
    },
    // 优先级选择
    handlePriority(val) {
      const priorityObj = {
        1: "primary",
        2: "warning",
        3: "danger",
      };
      this.form.priority = val;
      this.currentPriority = priorityObj[val];
    },
    // 删除标签
    handleCloseTags(row) {
      this.form.label = this.form.label.filter((item) => item.id !== row.id);
    },
    // 标签提交
    handleTagSubmit(valArr) {
      this.form.label = valArr;
      this.labelOpen = false;
    },
    // 点击标签
    handleLabelOpen() {
      this.labelOpen = true;
    },
    // 删除参与人
    handleCloseParticipants(row) {
      this.form.participants = this.form.participants.filter(
        (item) => item.userId !== row.userId
      );
    },
    // 点击提醒
    handleRemind() {
      this.$message.warning("敬请期待");
    },
    // 循环
    handleCirculate(val) {
      this.form.circulateType = val;
    },
    // 选择时间
    handleChooseTime() {
      this.$set(this.form.time, 0, moment());
    },
    // 选择用户
    handleChooseUser(type, index) {
      const userMultipleObj = {
        taskHead: false,
        participants: true,
        finishReview: true,
        ccTO: true,
        children: false,
      };
      this.userModalTypeKey = type;
      this.userMultiple = userMultipleObj[type];
      this.userModalOpen = true;
      this.childTaskIndex = index;
      setTimeout(() => {
        type === "children"
          ? this.$refs.userModal.getViewData(this.form[type][index].taskHead)
          : this.$refs.userModal.getViewData(this.form[type]);
      }, 200);
    },
    // 关闭选择用户弹窗
    closeUserModal() {
      this.userModalOpen = false;
    },
    // 用户选择提交
    handleUserSubmit(arr, type) {
      if (type === "children") {
        this.form[type][this.childTaskIndex].taskHead = arr;
      } else {
        this.form[type] = arr;
      }
      this.$refs.userModal.close();
    },
  },
  mounted() {
    if (!!this.propsObj.taskDetailData) {
      this.form = this.propsObj.taskDetailData;
      if (this.form.projectId) {
        this.getProTaskList(this.form.projectId, true);
        this.$nextTick(() => {
          this.$refs.belongingProjectRef?.setValue({
            id: this.form.projectId,
            title: this.form.projectTile,
          });
        });
      }
    }
    if (!this.form.taskHead || !this.form.taskHead.length) {
      this.form.taskHead = [this.$store.state.user.loginInfo];
    }
    if (this.projectRow?.id) {
      this.getProTaskList(this.projectRow?.id, true);
      this.$nextTick(() => {
        this.$refs.belongingProjectRef?.setValue(this.projectRow);
      });
    }
    if (this.proList?.id) {
      this.getProTaskList(this.projectRow?.id, true);
      this.form.projectListId = Number(this.proList?.id);
    }
  },
  created() {
    if (!localStorage.getItem("attribute")) {
      this.attribute = initAttribute;
      localStorage.setItem("attribute", JSON.stringify(initAttribute));
    } else {
      this.attribute = localStorage.getItem("attribute")
        ? JSON.parse(localStorage.getItem("attribute"))
        : initAttribute;
    }
  },
};
</script>

<style lang="scss" scoped>
.taskModel {
  .taskModelTitle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 5px;
  }
  .taskModelMain {
    .project {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
    }
    .form {
      .titleRow {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          color: #666;
          font-weight: 600;
          width: 80px;
          margin-left: 10px;
        }
        .taskTitle ::v-deep .el-textarea__inner {
          resize: none;
          line-height: 32px;
          font-size: 28px;
        }
      }
      .iconMainFlex {
        display: flex;
        align-items: center;
        padding: 12px 0;
      }
      .taskHead ::v-deep .el-icon-circle-plus-outline {
        &:hover {
          color: #1890ff;
        }
      }
      .taskHead {
        .hasTaskHead:hover {
          background: #ecf5ff;
          border-radius: 35px;
        }
        .hasTaskHead:hover .iconView {
          display: block;
        }
        .iconView {
          display: none;
          font-size: 18px;
          margin-left: 5px;
          color: #409eff;
        }
        .hasTaskHead {
          cursor: pointer;
          padding: 8px;
          display: flex;
          align-items: center;
          span {
            color: #666;
            font-size: 12px;
          }
          .avatar {
            display: inline-block;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #1890ff;
            color: #fff;
            line-height: 35px;
            text-align: center;
            font-size: 16px;
          }
        }
      }
      .time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .noTime {
          color: #409eff;
          cursor: pointer;
        }
        .chooseTime {
          display: flex;
          align-items: center;
          padding: 0 5px;
          ::v-deep .el-input__inner {
            border: none;
            background: transparent;
            padding-right: 10px;
          }
          ::v-deep .el-date-editor.el-input {
            width: 180px;
          }
          ::v-deep .el-input__suffix {
            display: none;
          }
          ::v-deep .endTime {
            width: 160px !important;
            .el-input__prefix {
              display: none;
            }
            .el-input__inner {
              padding-left: 20px;
              padding-right: 0px;
            }
          }
          .iconView {
            display: none;
            font-size: 18px;
            margin-left: 5px;
            color: #409eff;
            cursor: pointer;
          }
          &:hover .iconView {
            display: block;
          }
          &:hover {
            background: #ecf5ff;
            border-radius: 35px;
          }
        }
      }
      .participants,
      .ccTo,
      .finishReview {
        display: flex;
        align-items: flex-start;
        & ::v-deep .el-icon-circle-plus-outline {
          margin-left: 8px;
          &:hover {
            color: #1890ff;
          }
        }
      }
      .label {
        display: flex;
        align-items: center;
        & ::v-deep .el-icon-circle-plus-outline {
          margin-left: 8px;
          &:hover {
            color: #1890ff;
          }
        }
        ::v-deep .el-icon-close {
          color: #fff;
        }
        ::v-deep .el-icon-close:hover {
          background: transparent;
        }
      }
      .checkList,
      .children {
        .checkListItem,
        .childrenItem {
          display: flex;
          align-items: center;
          ::v-deep .el-icon-delete {
            font-size: 20px;
            margin: 0 12px;
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
          ::v-deep .el-icon-s-operation {
            font-size: 20px;
            cursor: pointer;
            &:hover {
              color: #409eff;
            }
          }
          .hasTaskHead {
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            span {
              color: #666;
              font-size: 12px;
            }
            .avatar {
              display: inline-block;
              width: 35px;
              height: 35px;
              border-radius: 50%;
              background: #1890ff;
              color: #fff;
              line-height: 35px;
              text-align: center;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  ::v-deep .taskModelCustomClass {
    .el-dialog__headerbtn {
      top: 25px;
    }
    .el-dialog__body {
      padding-top: 0px;
      min-height: 60vh;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>